<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- vue -->
    <script th:src="@{js/vue2.6.14.js(t=${time})}"></script>
    <!-- jquery -->
    <script th:src="@{js/jquery3.7.1.js(t=${time})}"></script>
    <!-- element-ui -->
    <link rel="stylesheet" th:href="@{css/element-ui-2.15.4.css(t=${time})}" >
    <script th:src="@{js/element-ui-2.15.4.js(t=${time})}"></script>
    <script th:src="@{js/common.js(t=${time})}"></script>
    <script th:src="@{js/echarts.min.js(t=${time})}"></script>
    <script th:src="@{js/element-resize-detector.min.js(t=${time})}"></script>
    <title>首页</title>
</head>
<body>
<div id="app">
    <div style="display: flex; gap:10px">
        <el-card shadow="never" class="card-view">
            <div class="card-title">
                <span>总用户数</span>
            </div>
            <div class="card-value">
                {{userCount.countAll}}
            </div>
        </el-card>
        <el-card shadow="never" class="card-view">
            <div class="card-title">
                <span>教师用户</span>
            </div>
            <div class="card-value">
                {{userCount.countTeacher}}
            </div>
        </el-card>
        <el-card shadow="never" class="card-view">
            <div class="card-title">
                <span>学生用户</span>
            </div>
            <div class="card-value">
                {{userCount.countStudent}}
            </div>
        </el-card>
    </div>
    <div style="display: flex; margin-top: 10px;" id="outer-view">
        <el-card shadow="never" class="card-view">
            <div style="margin: 0 auto;">
                <div id="achievement" ref="agriEcoDev" style="min-width: 500px; min-height: 400px; width: 100%; height: 100%;"></div>
            </div>
        </el-card>
    </div>
</div>
</body>
<script>
    const vapp = new Vue({
        el: "#app",
        data: {
            userCount: {
                countAll: 0,
                countTeacher: 0,
                countStudent: 0,
            }
        },
        created() {

        },
        mounted () {
            window.vue = this;
            let that = this;
            postRequest("/chartData", null, function (result) {
                if (result.code != 0) {
                    that.$message({
                        message: result.msg,
                        type: 'error'
                    });
                    return;
                }
                that.userCount = result.data.userCount;
                let scoreCount = result.data.scoreCount;

                let option = {
                    title: {
                        text: '成绩分布',
                            subtext: '实时数据',
                            left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                            left: 'left'
                    },
                    series: [
                        {
                            name: '百分比',
                            type: 'pie',
                            radius: '60%',
                            data: [
                                { value: scoreCount.excellent, name: '优秀' },
                                { value: scoreCount.good,      name: '良好' },
                                { value: scoreCount.pass,      name: '及格' },
                                { value: scoreCount.failed,    name: '不及格'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                let chartDom = document.getElementById('achievement');
                let myChart = echarts.init(chartDom, null, {renderer: 'svg'});
                myChart.setOption(option);

                // 窗口大小自适应
                window.addEventListener("resize", function () {
                    myChart.resize();
                })
                let erd = elementResizeDetectorMaker();
                erd.listenTo(that.$refs.agriEcoDev, () => {
                    that.$nextTick(() => {
                        myChart.resize();
                    });
                });
            });


        },
        methods: {
        }
    })

</script>

<style>
    .card-view {
        flex: 1;
        min-width: 200px;
        min-height: 100px;
    }

    .card-title {
        color: rgba(0, 0, 0, .45);
        font-size: 14px;
        line-height: 22px;
    }

    .card-value {
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        color: #000;
        margin-top: 30px;
        margin-bottom: 0;
        font-size: 30px;
        line-height: 38px;
        height: 38px;
    }
</style>
</html>